<template>
	<el-dialog :close-on-click-modal="false" title="修改密码" :visible.sync="show" width="35%" v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="120px" :rules="rules">
			<el-row>
				<el-col :span="24">
					<el-form-item label="旧密码" prop="oldPwd"><el-input v-model="request.data.oldPwd" type="password" autocomplete="off"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="新密码" prop="newPwd"><el-input v-model="request.data.newPwd" type="password" autocomplete="off"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="再次输入新密码" prop="newPwd2"><el-input v-model="request.data.newPwd2" type="password" autocomplete="off"></el-input></el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			<el-button @click="show = false">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import utils from 'util/utils.js';
import validate from 'util/validate.js';
import api from 'api/main.js';

export default {
	name: 'updateInfo',
	data() {
		var validatePwd2 = (rule, value, callback) => {
			if (value !== this.request.data.newPwd) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			isDisabled: false,
			loading: false,
			show: this.isDisplay,
			request: utils.newRequest(),
			rules: {
				oldPwd: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.length,
						min: 0,
						max: 100,
						trigger: 'blur'
					}
				],
				newPwd: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{
						validator: validate.length,
						min: 0,
						max: 100,
						trigger: 'blur'
					}
				],
				newPwd2: [
					{
						validator: validate.required,
						trigger: 'blur'
					},
					{ validator: validatePwd2, trigger: 'blur' }
				]
			}
		};
	},
	methods: {
		//提交表单
		submitForm(formName) {
			utils.checkForm(this.$refs[formName], () => {
				this.loading = true;
				api.updatePwd(
					this.request,
					response => {
						utils.msg.success(response.msg);
						this.loading = false;
						this.show = false;
						this.$parent.list();
					},
					response => {
						utils.msg.warning(response.msg);
						this.loading = false;
					}
				);
			});
		},
		init() {
			this.request = utils.newRequest();
		}
	},
	props: {
		isDisplay: {
			type: Boolean,
			default() {
				return false;
			}
		},
		parameter: {
			type: Array | Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		isDisplay(val) {
			this.show = val;
			if (val) {
				this.init();
			}
		},
		show(val) {
			this.$emit('update:isDisplay', val);
		},
		parameter(val) {
			this.parameter = val;
		}
	}
};
</script>

<style lang="scss"></style>
